<template>
  <div>
    <div class="search">
      <van-icon name="arrow-left" @click="$router.back()" />
      <van-search v-model="value" placeholder="请输入搜索关键词" />
      <span v-show="!value">取消</span>
      <span v-show="value" @click="search">搜索</span>
    </div>
    <div class="content" v-show="!flag">
      <!-- 搜索历史 -->
      <div class="btn" v-for="item in searchList" :key="item" @click="btnSearch(item)">
        {{ item }}
      </div>
    </div>
    <div class="contents" v-show="flag"></div>
    <div class="cart-item" v-for="(v, id) in list" :key="id" v-show="v.title">
      <div class="top">
        <p>{{ v.title }}</p>

        <p>共点击量</p>
      </div>
      <div class="center">
        <img :src="v.cover_img" alt="" />
      </div>
      <div class="bottom-item">
        <div class="bottom">
          <div
            v-for="(vv, ids) in v.teachers_list"
            :key="ids"
            class="bottom-list"
          >
            <p v-show="ids == 0" class="number">
              {{ vv.course_basis_id }}人报名
            </p>
          </div>
        </div>
        <div class="icon">
          <van-icon name="gold-coin" />
          <P> {{ v.price }}.00 </P>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let locaList = localStorage.getItem("search")
  ? JSON.parse(localStorage.getItem("search"))
  : [];
import { getcoures, getcourseBasis } from "@/tool/course";
export default {
  data() {
    return {
      value: "",
      flag: false,
      list: [],
      searchList: locaList.slice(0, 5),
    };
  },
  methods: {
    async search() {
      this.flag = true;
      let index = locaList.findIndex((item) => {
        return item == this.value;
      });
      if (index != -1) {
        locaList.splice(index, 1);
      }
      locaList.unshift(this.value);
      localStorage.setItem("search", JSON.stringify(locaList));
      let res = await getcourseBasis({
        keywords: this.value,
        limit: 10,
        page: 1,
        course_type: 0,
      });
      this.list = res.data.list;
      console.log(res);
    },
    btnSearch(item){
      this.value=item
      this.search()
    }
  },
  watch: {
    value(n) {
      let filte = locaList.filter((item) => {
        return item.includes(n);
      });
      console.log(filte);
      this.locaList = filte.slice(0, 5);
      if (!n) {
        this.flag = false;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 26px;
  .van-search {
    width: 88vw;
  }
}
.content {
  width: 100%;
  display: flex;

  .btn {
    background-color: white;
    margin: 10px;
  }
}
.cart-item {
  height: 215px;
  padding: 0 20px;
  background-color: white;
  margin-bottom: 10px;

  .top {
    height: 40%;
    p:nth-child(1) {
      font-size: 20px;
      margin: 10px 0;
    }
    p:nth-child(2) {
      font-size: 16px;
      color: #777777;
    }
  }
  .center {
    height: 40%;
    img {
      width: 58px;
      height: 58px;
      border-radius: 50%;
    }
  }
  .bottom-item {
    width: 100%;
    display: flex;
    .bottom {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .number {
        font-size: 16px;
        color: #999999;
      }
      .bottom-list {
        width: 100%;
        display: flex;
        justify-content: space-between;
      }
    }
    .icon {
      display: flex;

      align-items: center;
      color: #ffa500;
      P {
        margin-left: 10px;
      }
    }
  }
}
</style>